<template>
    <div class="alert" v-if="show">
        <div>
            <a href="javascript:void(0);" class="close" v-on:click="closealert()">X</a>
            <img src="~assets/img/alert.png"/>
            <p class="title">{{msg.title}}</p>
            <p class="msg">{{msg.msg}}</p>
        </div>
    </div>
</template>

<script>
    export default {
        data (){
            return{
                show:false,
                msg:{
                    title:'',
                    msg:''
                }
            }
        },
        methods : {
            showalert: function(title,msg){
                this.show = true;
                this.msg.title = title;
                this.msg.msg = msg;
            },
            closealert: function(){
                this.show = false;
            }
        }
    }
</script>

<style rel="stylesheet/less" lang="less" scoped>
    @import '~assets/css/less.less';
    .alert{
        &:before{content:""; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:1;}
        div{
            position:fixed; z-index:2; top:40%; left:50%; margin-left:-250/@rem; width:500/@rem; background:#fff; border-radius:22/@rem; text-align:center; padding:40/@rem 0;
            img{width:94/@rem; height:94/@rem; display:block; margin:0 auto 10/@rem;}
            .title{font-size:42/@rem; color:#121470; font-weight:bold; line-height:60/@rem;}
            .msg{font-size:27/@rem; color:#000;}
            .close{
                position:absolute; right:-20/@rem; top:-20/@rem; width:65/@rem; height:65/@rem; background:#ffff00; color:#121470; border-radius:100%; line-height:65/@rem; font-weight:bold;
            }
        }
    }
</style>